<template>
  <section class="product-list card">
    <header class="product-list__header">
      <div>
        <h2>精选轴承库存</h2>
        <p>
          共 {{ total || products.length }} 条结果 · 数据与仓储系统实时同步
        </p>
      </div>
      <button class="btn btn--ghost" @click="$emit('request-verification-info')">
        查看核实与下单流程
      </button>
    </header>

    <div v-if="error" class="product-list__error">
      <strong>加载失败：</strong>
      <span>{{ error }}</span>
      <button class="btn btn--primary" @click="$emit('retry')">重试加载</button>
    </div>

    <div v-if="loading" class="product-list__grid">
      <ProductSkeleton v-for="n in skeletonCount" :key="n" />
    </div>
    <template v-else>
      <div v-if="products.length" class="product-list__grid">
        <article v-for="product in products" :key="product.id" class="product">
          <figure class="product__media">
            <img :src="product.image" :alt="product.name" loading="lazy" />
            <div class="product__tags">
              <span v-for="tag in product.tags" :key="tag">{{ tag }}</span>
            </div>
          </figure>
          <div class="product__body">
            <header class="product__title">
              <h3>{{ product.name }}</h3>
              <span class="product__model">{{ product.model }}</span>
            </header>
            <ul class="product__meta">
              <li>
                <span>品牌</span>
                <strong>{{ product.brand }}</strong>
              </li>
              <li>
                <span>产地</span>
                <strong>{{ product.origin }}</strong>
              </li>
              <li>
                <span>货仓</span>
                <strong>{{ product.warehouse }}</strong>
              </li>
              <li>
                <span>库存</span>
                <strong>{{ product.stock }} 件</strong>
              </li>
            </ul>
            <div class="product__footer">
              <div class="product__price">
                <template v-if="isLoggedIn">
                  <span class="product__price-label">协议价</span>
                  <span class="product__price-value">
                    ￥{{ product.price.toFixed(2) }}
                  </span>
                </template>
                <template v-else>
                  <span class="product__price-mask">登录后可查看价格</span>
                  <button class="link" @click="$emit('login-required')">
                    立即登录 →
                  </button>
                </template>
              </div>
              <div class="product__actions">
                <button class="btn btn--secondary" @click="$emit('verify-stock', product)">
                  核实库存
                </button>
                <button class="btn btn--primary" @click="$emit('add-cart', product)">
                  加入购物车
                </button>
              </div>
            </div>
            <footer class="product__extra">
              <span>承诺：原厂正品 · 批次可追溯 · 支持企业对公</span>
              <span>预计发货：{{ product.leadTime }}</span>
            </footer>
          </div>
        </article>
      </div>

      <div v-else class="product-list__empty">
        <h3>暂未找到匹配的库存</h3>
        <p>可尝试调整筛选条件，或联系我们的专属顾问帮您找货。</p>
        <button class="btn btn--primary" @click="$emit('reset-search')">
          重置筛选
        </button>
      </div>

      <PaginationBar
        v-if="totalPages > 1"
        :page="page"
        :page-size="pageSize"
        :total="total"
        @change="$emit('change-page', $event)"
      />
    </template>
  </section>
</template>

<script setup>
import { computed } from "vue";
import ProductSkeleton from "./ProductSkeleton.vue";
import PaginationBar from "./PaginationBar.vue";

const props = defineProps({
  products: {
    type: Array,
    default: () => []
  },
  isLoggedIn: {
    type: Boolean,
    default: false
  },
  loading: {
    type: Boolean,
    default: false
  },
  error: {
    type: String,
    default: ""
  },
  page: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 12
  },
  total: {
    type: Number,
    default: 0
  }
});

defineEmits([
  "login-required",
  "verify-stock",
  "add-cart",
  "reset-search",
  "request-verification-info",
  "retry",
  "change-page"
]);

const skeletonCount = computed(() => Math.max(4, props.pageSize));
const totalPages = computed(() =>
  Math.max(1, Math.ceil((props.total || props.products.length || 0) / props.pageSize))
);
</script>

<style scoped lang="scss">
.product-list {
  margin-top: 24px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.product-list__error {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: rgba(255, 125, 0, 0.08);
  color: #c15c00;
  border-radius: 12px;
  font-size: 14px;

  .btn {
    margin-left: auto;
  }
}

.product-list__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  h2 {
    margin: 0;
  }

  p {
    margin: 4px 0 0;
    color: var(--gray-500);
  }

  @media (max-width: 720px) {
    flex-direction: column;
    align-items: flex-start;
  }
}

.product-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.product {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--gray-100);
  transition: transform 0.2s ease, box-shadow 0.2s ease;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 28px rgba(16, 24, 40, 0.12);
  }
}

.product__media {
  position: relative;
  height: 180px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.product__tags {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  gap: 8px;

  span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
  }
}

.product__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
}

.product__title {
  display: flex;
  flex-direction: column;
  gap: 6px;

  h3 {
    margin: 0;
    font-size: 18px;
  }
}

.product__model {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 600;
}

.product__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;

  li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--gray-500);

    strong {
      color: var(--gray-900);
    }

  }

}

.product__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.product__price {
  display: flex;
  flex-direction: column;
  gap: 4px;

  &-label {
    font-size: 12px;
    color: var(--gray-500);
  }

  &-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-color);
  }

  &-mask {
    font-size: 14px;
    color: var(--gray-500);
  }
}

.link {
  background: none;
  border: none;
  color: var(--primary-color);
  padding: 0;
  font: inherit;
  text-decoration: underline;
}

.product__actions {
  display: flex;
  gap: 10px;

  @media (max-width: 480px) {
    width: 100%;
    flex-direction: column;
  }
}

.btn {
  border-radius: 12px;
  padding: 10px 16px;
  border: none;
  font-weight: 600;
  min-width: 120px;

  &--secondary {
    background: var(--gray-100);
    color: var(--gray-700);

    &:hover {
      background: var(--gray-200);
    }
  }

  &--primary {
    background: var(--primary-color);
    color: #fff;

    &:hover {
      background: #0040ad;
    }
  }
}

.product__extra {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-500);

  @media (max-width: 480px) {
    flex-direction: column;
    gap: 4px;
  }
}

.product-list__empty {
  text-align: center;
  padding: 60px 20px;

  h3 {
    margin-bottom: 12px;
  }

  p {
    margin-bottom: 18px;
    color: var(--gray-500);
  }
}
</style>
